<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Resume Template - Stilearn Admin Bootstrap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- CSS -->
        <link href="../../css/bootstrap.css" rel="stylesheet" />
        <link href="../../css/font-awesome.css" rel="stylesheet" />

        <link href="css/resume.css" rel="stylesheet" />
        <link href="css/resume-control.css" rel="stylesheet" />

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!--controller-->
        <div class="controller">
            <a class="btn btn-block btn-danger" href="../../">Back to Dashboard</a>
            <button id="print" class="btn btn-block">Print</button>
            <button id="pdf" class="btn btn-block">PDF</button>
            <ul>
                <li><a title="black" id="black" href="#black" class="avail-color bg-black"></a></li>
                <li><a title="teal" id="teal" href="#teal" class="avail-color bg-teal"></a></li>
                <li><a title="win8" id="win8" href="#win8" class="avail-color bg-win8"></a></li>
                <li><a title="blue" id="blue" href="#blue" class="avail-color bg-blue"></a></li>
                <li><a title="purple" id="purple" href="#purple" class="avail-color bg-purple"></a></li>
                <li><a title="purple-dark" id="purple-dark" href="#purple-dark" class="avail-color bg-purple-dark"></a></li>
                <li><a title="red" id="red" href="#red" class="avail-color bg-red"></a></li>
                <li><a title="orange" id="orange" href="#orange" class="avail-color bg-orange"></a></li>
                <li><a title="green" id="green" href="#green" class="avail-color bg-green"></a></li>
                <li><a title="sky" id="sky" href="#sky" class="avail-color bg-sky"></a></li>
            </ul>
        </div><!--/controller-->

        <div class="container">
            <!--Header-->
            <div id="resume-head" class="grd-black">
                <div class="row-fluid">
                    <div class="span4">
                        <h1 class="pull-right">John Doe</h1>
                    </div>
                    <div class="span6">
                        <p>Profesional & Simple Resume</p>
                    </div>
                    <div class="span2">
                        <div class="resume-photo">
                            <img src="img/photo.jpg" />
                        </div>
                    </div>
                </div>
            </div><!--/Header-->

            <!--Content-->
            <div id="resume-content">
                <!--Profile-->
                <div class="row-fluid profile">
                    <!--left-->
                    <div class="span6">
                        <div class="left">
                            <h3 class="title-icon pull-left"><i class="icofont-user"></i></h3>
                            <div class="title">
                                <h3>Profile</h3>
                            </div>
                        </div>
                    </div><!--/left-->

                    <!--right-->
                    <div class="span6">
                        <div class="right">
                            <div class="title display-table">
                                <p>Name</p>
                                <span class="pull-right">John Doe</span>
                            </div>
                            <div class="title display-table">
                                <p>Birthday</p>
                                <span class="pull-right">10 October 1989 (23)</span>
                            </div>
                            <div class="title display-table">
                                <p>Nationaly</p>
                                <span class="pull-right">Indonesia</span>
                            </div>
                            <div class="title display-table">
                                <p>Marital Status</p>
                                <span class="pull-right">Single</span>
                            </div>
                            <div class="title display-table">
                                <p>Address</p>
                                <span class="pull-right">Hos Cokro Aminoto 25 Central Java</span>
                            </div>
                            <div class="title display-table">
                                <p>Contact</p>
                                <span class="pull-right"><i class="icofont-phone"></i> +62 87711 6061 10 &nbsp;&nbsp;&nbsp; <i class="icofont-envelope"></i> johndoe@mail.com</span>
                            </div>
                        </div>
                    </div><!--/right-->
                </div><!--/Profile-->

                <!--Education-->
                <div class="education">
                    <h3 class="title-icon pull-left"><i class="icofont-book"></i></h3>
                    <div class="title">
                        <h3>Education</h3>
                    </div>
                    <!--block edu-->
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="pull-right">
                                <p class="education-name">School of Pekalongan</p>
                                <p class="education-helper muted pull-right">2004 - 2007</p>
                            </div>
                        </div>
                        <div class="span6">
                            <p class="description">Lorem ipsum dolor sit amet, sed ornare ullamcorper et vivamus nostrum a, pede purus sapien fringilla adipiscing lorem lectus, orci dolor, volutpat vitae urna. Feugiat justo porttitor repudiandae mauris posuere. Nisl pede vel pellentesque cras felis auctor.</p>
                        </div>
                    </div><!--block edu-->

                    <!--block edu-->
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="pull-right">
                                <p class="education-name">STMIK WP University</p>
                                <p class="education-helper muted pull-right">2007 - 2012</p>
                            </div>
                        </div>
                        <div class="span6">
                            <p class="description">Lorem ipsum dolor sit amet, sed ornare ullamcorper et vivamus nostrum a, pede purus sapien fringilla adipiscing lorem lectus, orci dolor, volutpat vitae urna. Feugiat justo porttitor repudiandae mauris posuere. Nisl pede vel pellentesque cras felis auctor.</p>
                        </div>
                    </div><!--block edu-->

                </div><!--/Education-->

                <!--Experience-->
                <div class="experience">
                    <h3 class="title-icon pull-left"><i class="icofont-briefcase"></i></h3>
                    <div class="title">
                        <h3>Experience</h3>
                    </div>
                    <!--block experience-->
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="pull-right">
                                <p class="experience-name">Graphic Designer</p>
                                <p class="experience-helper muted pull-right">2009 - 2010</p>
                            </div>
                        </div>
                        <div class="span6">
                            <p class="description">Lorem ipsum dolor sit amet, sed ornare ullamcorper et vivamus nostrum a, pede purus sapien fringilla adipiscing lorem lectus, orci dolor, volutpat vitae urna. Feugiat justo porttitor repudiandae mauris posuere. Nisl pede vel pellentesque cras felis auctor.</p>
                        </div>
                    </div><!--block experience-->

                    <!--block experience-->
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="pull-right">
                                <p class="experience-name">Web Programer</p>
                                <p class="experience-helper muted pull-right">2010 - 2011</p>
                            </div>
                        </div>
                        <div class="span6">
                            <p class="description">Lorem ipsum dolor sit amet, sed ornare ullamcorper et vivamus nostrum a, pede purus sapien fringilla adipiscing lorem lectus, orci dolor, volutpat vitae urna. Feugiat justo porttitor repudiandae mauris posuere. Nisl pede vel pellentesque cras felis auctor.</p>
                        </div>
                    </div><!--block experience-->

                    <!--block experience-->
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="pull-right">
                                <p class="experience-name">Interface Designer</p>
                                <p class="experience-helper muted pull-right">2011 - 2012</p>
                            </div>
                        </div>
                        <div class="span6">
                            <p class="description">Lorem ipsum dolor sit amet, sed ornare ullamcorper et vivamus nostrum a, pede purus sapien fringilla adipiscing lorem lectus, orci dolor, volutpat vitae urna. Feugiat justo porttitor repudiandae mauris posuere. Nisl pede vel pellentesque cras felis auctor.</p>
                        </div>
                    </div><!--block experience-->


                </div><!--/Experience-->

                <!--Skills-->
                <div class="skills">
                    <h3 class="title-icon pull-left"><i class="icofont-bar-chart"></i></h3>
                    <div class="title">
                        <h3>Skills</h3>
                    </div>
                    <div class="row-fluid">
                        <div class="span10 offset1">
                            <div class="row-fluid">
                                <div class="span6">
                                    <!--Personal-->
                                    <div class="row-fluid">
                                        <div class="span4"><p class="skill-name">Personal</p></div>
                                        <div class="span8">
                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Sosial Commitment</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Organization</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Creativity</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Communication</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Teamwork</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->
                                        </div>
                                    </div><!--/Personal-->
                                </div>
                                <div class="span6">
                                    <!--Technical-->
                                    <div class="row-fluid">
                                        <div class="span4"><p class="skill-name">Technical</p></div>
                                        <div class="span8">
                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">HTML5 & CSS3</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Javascript</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">PHP</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Photoshop</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Flash</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->

                                            <!--block skills list-->
                                            <div class="row-fluid description">
                                                <div class="span5"><p class="">Netbeans</p></div>
                                                <!--skill rating-->
                                                <div class="span7">
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                    <i class="icofont-star-empty"></i> 
                                                </div>
                                            </div><!--/block skills desc-->
                                        </div>
                                    </div><!--/Technical-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/Skills-->
            </div><!--/Content -->

        </div><!--/Container-->

        <!-- JS -->
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>

        <script type="text/javascript">

            jQuery(document).ready(function($) {

                $('a.avail-color').click(function(){
                    return false;
                })


                /* print
          --------------------------- */
                $('#print').click(function(){
                    window.print();
                })
                /* end print
          --------------------------- */

                /* pdf
          --------------------------- */
                $('#pdf').click(function(){
                    // your pdf action here...
                    alert('your pdf action here...');
                })
                /* end print
          --------------------------- */

                /* change color
          --------------------------- */
                $('.controller a').click(function(){
                    color = $(this).attr('title');

                    $('#resume-head').attr('class', 'grd-'+color);
                    $('.title h3, .title p').attr('class', 'border-'+color);
                });
                /* end change color
          --------------------------- */
            });
    
        </script>
    </body>
</html>